<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Mednalytics</title>
    <!-- Iconic Fonts -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="../../vendors/iconic-fonts/font-awesome/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../vendors/iconic-fonts/flat-icons/flaticon.css">
    <link rel="stylesheet" href="../../vendors/iconic-fonts/cryptocoins/cryptocoins.css">
    <link rel="stylesheet" href="../../vendors/iconic-fonts/cryptocoins/cryptocoins-colors.css">
    <!-- Bootstrap core CSS -->
    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Page Specific Css (Datatables.css) -->
    <link href="../../assets/css/datatables.min.css" rel="stylesheet">
    <!-- jQuery UI -->
    <link href="../../assets/css/jquery-ui.min.css" rel="stylesheet">
    <!-- Page Specific CSS (Slick Slider.css) -->
    <link href="../../assets/css/slick.css" rel="stylesheet">
    <!-- Mednalytics styles -->
    <link href="../../assets/css/style.css" rel="stylesheet">

    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="../../favicon.ico">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body class="ms-body ms-aside-left-open ms-primary-theme ms-has-quickbar">
<!-- Setting Panel -->
<script src="../../assets/reuseCode/top.js"></script>
<!-- Body Content Wrapper -->
<div id="body">
<div class="ms-content-wrapper doc" id="doctor_list">
    <div class="row">
        <div class="col-md-12">
            <nav aria-label="breadcrumb" class="ms-panel-custome">
                <ol class="breadcrumb pl-0">
                    <li class="breadcrumb-item"><a href="#"><i class="material-icons">home</i> 首页</a></li>
                    <li class="breadcrumb-item active" aria-current="page">医生列表</li>
                </ol>

            </nav>
        </div>
        <div class="col-md-12">
            <div id="aptable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
            <div class="row">
            <div class="col-sm-12 col-md-6">
                <div class="dataTables_length" id="aptable_length">
                    <label>选择科室:
                        <select id="select1" class=" form-control form-control-sm" v-model="oficId"
                                @change="loadDoctors(this.oficId)"  >
                            <option value="ALL" selected="selected">全部</option>
                            <option v-for="department in departments" v-bind:value="department.officeId" v-text="department.officeName">外科</option>
                        </select>
                    </label>
                </div>
            </div>
            <div class="col-sm-12 col-md-6">
                <div id="aptable_filter" >
                    <label>
                        <input type="search" class="form-control form-control-sm"
                               placeholder="输入关键词查询" >
                    </label>
                </div>
            </div>
        </div>
        </div>
    </div>
        <div class="col-lg-4 col-md-4 col-sm-6" v-for="doctor in doctors" v-bind:id="doctor.id">

            <div class="ms-card">
                <div class="ms-card-body">
                    <div class="media fs-14">
                        <div class="mr-2 align-self-center">
                            <a href="#mymodal1" data-toggle="modal" aria-haspopup="true" aria-expanded="false" @click="loadTheDoc(doctor)">
                            <img src="../../assets/img/dashboard/headmodel.jpg" class="ms-img-round" alt="people"
                                 v-bind:src="doctor.headimgUrl">
                            </a>
                        </div>
                        <div class="media-body">
                            <h6 v-text="doctor.name">张家辉</h6>
                            <div class="dropdown float-right">
                                <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="material-icons">more_vert</i>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li class="ms-dropdown-list">
                                        <a class="media p-2" href="#mymodal1" data-toggle="modal" @click="loadTheDoc(doctor)">
                                            <div class="media-body">
                                                <span>查看详细信息</span>
                                            </div>
                                        </a>
                                        <a class="media p-2" href="#mymodal2" data-toggle="modal" @click="editThisDoc(doctor)">
                                            <div class="media-body">
                                                <span>编辑</span>
                                            </div>
                                        </a>
                                        <a class="media p-2" href="#" @click="deleteDoc(doctor)">
                                            <div class="media-body">
                                                <span>删除</span>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <p class="fs-12 my-1 text-disabled" v-text="doctor.departmentName">眼科医生</p>
                            <h6 class="mt-2">生日:
                    <span class="fs-14" v-text="doctor.birthday">
                    </span></h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MODALS 查看医生详细信息-->
<div class="modal fade doc" id="mymodal1" tabindex="-1" role="dialog" style=" padding-right: 17px;">
    <div class="modal-dialog ms-modal-dialog-width">
        <div class="modal-content ms-modal-content-width">
            <div class="modal-header  ms-modal-header-radius-0">
                <h4 class="modal-title text-white">医生详细信息</h4>
                <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">x</button>
            </div>
            <div class="modal-body p-0 text-left">
                <div class="col-xl-12 col-md-12">
                    <div class="ms-panel ms-panel-bshadow-none">
                        <div class="ms-panel-header">
                            <h6>医生详细信息</h6>
                        </div>
                        <div class="ms-panel">
                            <div class="ms-panel-body">
                                <form class="needs-validation" id="form">
                                    <div class="form-row">
                                        <div class="col-md-12 mb-6">
                                            <img id="img1" src="../../assets/img/dashboard/headmodel.jpg "
                                                 class="ms-profile-img" alt="people">
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="col-md-3 mb-3">
                                            <h5>医生姓名:</h5>
                                            <h6 id="docname">张家辉</h6>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <h5>性别:</h5>
                                            <h6 id="docgender">男</h6>
                                        </div>

                                    </div>
                                    <div class="form-row">
                                        <div class="col-md-3 mb-3">
                                            <h5>电子邮箱:</h5>
                                            <h6 id="docemail">792836260@qq.com</h6>
                                        </div>

                                        <div class="col-md-3 mb-3">
                                            <h5>联系电话</h5>
                                            <h6 id="docphone">18709422435</h6>
                                        </div>


                                    </div>
                                    <div class="form-row">
                                        <div class="col-md-3 mb-3">
                                            <h5>所属科室:</h5>
                                            <h6 id="dpname">外科</h6>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <h5>血型:</h5>
                                            <h6 id="docbloodtype">A+</h6>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="col-md-3 mb-3">
                                            <h5>生日:</h5>
                                            <h6 id="docbirthday">1995/03/22</h6>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <h5>其他信息</h5>
                                            <h6 id="docdescription">大家好我是渣渣灰</h6>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!--编辑修改医生信息-->
<div class="modal fade doc" id="mymodal2" tabindex="-1" role="dialog" style=" padding-right: 17px;">
    <div class="modal-dialog ms-modal-dialog-width">
        <div class="modal-content ms-modal-content-width">
            <div class="modal-header  ms-modal-header-radius-0">
                <h4 class="modal-title text-white">修改医生信息</h4>
                <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">x</button>
            </div>
            <div class="modal-body p-0 text-left">
                <div class="col-xl-12 col-md-12">
                    <div class="ms-panel">
                        <div class="ms-panel-body">
                            <form class="needs-validation" @submit.prevent="submitEdit()">
                                <div class="form-row">
                                    <div class="col-md-3 mb-3">
                                        <label>上传工作照</label>
                                        <div class="custom-file">
                                            <input type="file" id="imginput" class="custom-file-input info" accept="image/*" >
                                            <label id="label" class="custom-file-label" >更换图片...</label>
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <img id="img2" src="../../assets/img/dashboard/headmodel.jpg "
                                             class="ms-img-large ms-user-img mx-auto info" alt="people" >
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-md-3 mb-3">
                                        <label for="inputname">医生姓名</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control info" id="inputname"
                                                   placeholder="请输入医生姓名" required>

                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <label for="inputmail">电子邮箱</label>
                                        <div class="input-group">
                                            <input type="email" class="form-control info" id="inputmail"
                                                   placeholder="请输入要绑定绑定的电子邮箱" required>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-md-3 mb-2">
                                        <label for="inputphone">联系电话</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control info" id="inputphone"
                                                   placeholder="请输入联系电话"
                                                   required>

                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <label>归属科室</label>
                                        <div class="input-group">
                                            <select class="form-control " id="selectDepartment">
                                                <option value="" selected="selected">请选择---</option>

                                            </select>

                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-md-3 mb-2">
                                        <label for="bloodType">血型</label>
                                        <div class="input-group">
                                            <select class="form-control" id="bloodType" required>
                                                <option value="" >请选择---</option>
                                                <option value="A+" >A+</option>
                                                <option value="A-">A-</option>
                                                <option value="B+">B+</option>
                                                <option value="B-">B-</option>
                                                <option value="AB+">AB+</option>
                                                <option value="AB-">AB-</option>
                                                <option value="O+">O+</option>
                                                <option value="O-">O-</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label>出生日期</label>
                                        <div class="input-group">
                                            <input type="date" id="birthday" class="form-control info"/>
                                        </div>
                                    </div>
                                </div>




                                <div class="form-row">
                                    <div class="col-md-6 mb-3">
                                        <label>个人简介</label>
                                        <div class="input-group">
                                            <textarea class="form-control info" id="introduce" rows="5"></textarea>

                                        </div>
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-md-6 mb-3">
                                        <label>性别</label>
                                        <ul class="ms-list d-flex">
                                            <li class="ms-list-item pl-0">
                                                <label class="ms-checkbox-wrap">
                                                    <input type="radio" name="gender" value="男">
                                                    <i class="ms-checkbox-check"></i>
                                                </label>
                                                <span> 男 </span>
                                            </li>
                                            <li class="ms-list-item">
                                                <label class="ms-checkbox-wrap">
                                                    <input type="radio" name="gender" value="女" checked>
                                                    <i class="ms-checkbox-check"></i>
                                                </label>
                                                <span> 女 </span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <button class="btn btn-primary mt-4 d-inline w-20"  type="submit">提交</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</div>
<script src="../../assets/reuseCode/reminderModal.js"></script>
<!-- Notes Modal -->
<script src="../../assets/reuseCode/notesModal.js"></script>
<!-- Modal -->
<script src="../../assets/reuseCode/modal.js"></script>
<!-- SCRIPTS -->
<!-- Global Required Scripts Start -->
<script src="../../assets/js/jquery-3.3.1.min.js"></script>
<script src="../../assets/js/popper.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/perfect-scrollbar.js"></script>
<script src="../../assets/js/jquery-ui.min.js"></script>
<!-- Global Required Scripts End -->
<!-- Page Specific Scripts Start -->
<script src="../../assets/js/slick.min.js"></script>
<script src="../../assets/js/moment.js"></script>
<script src="../../assets/js/jquery.webticker.min.js"></script>
<script src="../../assets/js/Chart.bundle.min.js"></script>
<script src="../../assets/js/Chart.Financial.js"></script>
<!-- Page Specific Scripts Finish -->
<!-- Mednalytics core JavaScript -->
<script src="../../assets/js/framework.js"></script>
<!-- Settings -->
<script src="../../assets/js/settings.js"></script>
<!--加载医生的js-->
<script src="../../assets/js/doctor/doctor-list.js"></script>
</body>

</html>
